'use client';

import { Difficulty } from '@/lib/sudoku';

interface GameControlsProps {
  difficulty: Difficulty;
  time: number;
  errors: number;
  onDifficultyChange: (difficulty: Difficulty) => void;
  onNewGame: () => void;
  onHint: () => void;
}

export function GameControls({
  difficulty,
  time,
  errors,
  onDifficultyChange,
  onNewGame,
  onHint
}: GameControlsProps) {
  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };

  return (
    <div className="flex flex-col gap-4 w-full max-w-md">
      <div className="bg-white rounded-lg shadow-md p-4 grid grid-cols-2 gap-4">
        <div className="text-center">
          <div className="text-sm text-gray-600">Time</div>
          <div className="text-2xl font-bold text-gray-900">{formatTime(time)}</div>
        </div>
        <div className="text-center">
          <div className="text-sm text-gray-600">Errors</div>
          <div className="text-2xl font-bold text-red-600">{errors}</div>
        </div>
      </div>

      <div className="bg-white rounded-lg shadow-md p-4">
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Difficulty
        </label>
        <select
          value={difficulty}
          onChange={(e) => onDifficultyChange(e.target.value as Difficulty)}
          className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        >
          <option value="easy">Easy</option>
          <option value="medium">Medium</option>
          <option value="hard">Hard</option>
        </select>
      </div>

      <button
        onClick={onNewGame}
        className="w-full py-3 bg-green-600 text-white rounded-lg font-semibold hover:bg-green-700 transition-colors shadow-md"
      >
        New Game
      </button>

      <button
        onClick={onHint}
        className="w-full py-3 bg-yellow-500 text-white rounded-lg font-semibold hover:bg-yellow-600 transition-colors shadow-md"
      >
        Get Hint
      </button>
    </div>
  );
}
